<template>
    <div style="padding: 10px;">
        <el-form :model="queryParams" ref="queryForm" class="queryForm" :inline="true" v-show="showSearch"
                 @submit.native.prevent>
            <!--  <el-form-item label="表单类型" desc="1打版" prop="formType">
                  <dic-select v-model="queryParams.formType" :code="dicInner.mes_bpm_form_formType" placeholder="表单类型"
                              clearable size="small" style="width:120px;" @keyup.enter.native="handleQuery" />
              </el-form-item>-->
            <el-form-item label="对应字段名" desc="对应字段名" prop="fieldName">
                <el-input v-model.trim="queryParams.fieldName" placeholder="对应字段名" clearable size="small"
                          style="width:120px;" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="对应字段类型" desc="对应字段类型 1文本  2单选框  3多选框  4下拉框 " prop="fieldType">
                <dic-select v-model="queryParams.fieldType" :code="dicInner.mes_bpm_form_fieldType"
                            placeholder="对应字段类型 1文本  2单选框  3多选框  4下拉框 " clearable size="small" style="width:120px;"
                            @keyup.enter.native="handleQuery" />
            </el-form-item>
            
            
            <el-form-item label="状态" desc="状态 1 正常  5暂停 10废除" prop="state">
                <dic-select v-model="queryParams.state" :code="dicInner.mes_bpm_form_state"
                            placeholder="状态 " clearable size="small" style="width:120px;"
                            @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @submit.native.prevent @click="handleQuery">
                    搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" class="buttonsRow">
                <el-button type="primary" size="small" plain @click="()=>triggerModify()">新增</el-button>
                <el-button size="small" plain type="primary"
                           @click="()=>triggerExpression()"> 配置表达式
                </el-button>
                <el-button size="small" plain type="primary"
                           @click="()=>triggerEventHandler()"> 配置事件
                </el-button>
            
            </el-col>
            <right-toolbar @layout="(_obj)=>columnsHidden=_obj" :showSearch.sync="showSearch"
                           @queryTable="getInfoList"></right-toolbar>
        </el-row>
        <section class="tablecontainer">
            <el-table border ref="multipleTable" :data="dataList" size="mini" class="tabletop" tooltip-effect="dark"
                      style="width: 100%" @selection-change="rows=>{         selectRows=rows      }"
                      @row-click="row=>{          tableRowClickOnece(row,'multipleTable')      }"
                      :row-class-name="tableRowClassName">
                <el-table-column type="selection" width="40" align="center">
                </el-table-column>
                <el-table-column label="操作" width="55"  align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="操作" width="222" trigger="hover">
                            <div>
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                           @click="()=>triggerModify(scope.row)"> 修改
                                </el-button>
                    
                                <!--   <el-button size="mini" type="text" icon="el-icon-notebook-1"
                                              @click="()=>openLog(scope.row)">变更日志
                                   </el-button>-->
                                <el-button size="mini" type="text" icon="el-icon-delete"
                                           @click="()=>handleDelete(scope.row)">删除
                                </el-button>
                            </div>
                            <el-button slot="reference" type="text">操作</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column v-if="!columnsHidden['orderNum']" label="排序号" prop="orderNum" min-width="66px;">
                    <template slot-scope="scope">
                        <div>
                            <span style="margin-right:5px;"> {{scope.row.orderNum}}</span>
                            <span><svg-icon icon-class="down"
                                            style=" transform: rotate(180deg);margin-right:5px;    cursor: pointer;"
                                            v-if="scope.$index!=0"
                                            @click.native.stop="()=>upup(scope.row,scope.$index)"
                            ></svg-icon></span>
                            <span><svg-icon icon-class="down" style="    cursor: pointer;"
                                            v-if="scope.$index!=dataList.length-1"
                                            @click.native.stop="()=>downdown(scope.row,scope.$index)"
                            ></svg-icon></span>
                        </div>
                    </template>
                </el-table-column>
                
                
                <!--  <el-table-column v-if="!columnsHidden['formType']" label="表单类型" prop="formType" min-width="120px;">
                      <template slot-scope="scope">
                          <dic-select :code="dicInner.mes_bpm_form_formType" v-model="scope.row.formType"></dic-select>
                      </template>
                  </el-table-column>-->
                <el-table-column v-if="!columnsHidden['fieldName']" label="对应字段名" prop="fieldName" min-width="120px;">
                    <template slot-scope="scope">
                        <div> {{scope.row.fieldName}}</div>
                    </template>
                </el-table-column>
                <el-table-column v-if="!columnsHidden['fieldType']" label="对应字段类型" prop="fieldType" min-width="120px;">
                    <template slot-scope="scope">
                        <dic-tag :code="dicInner.mes_bpm_form_fieldType" v-model="scope.row.fieldType"></dic-tag>
                    </template>
                </el-table-column>
                <el-table-column v-if="!columnsHidden['fieldType']" label="下拉值" prop="fieldType" min-width="120px;">
                    <template slot-scope="scope">
                        {{scope.row.valueList}}
                    </template>
                </el-table-column>
                
                
                <el-table-column v-if="!columnsHidden['state']" label="状态" prop="state" min-width="120px;">
                    <template slot-scope="scope">
                        <dic-tag :code="dicInner.mes_bpm_form_state" v-model="scope.row.state"></dic-tag>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间/人" prop="add_time/add_user" v-if="!columnsHidden['add_time/add_user']">
                    <template slot-scope="scope">
                        <span>{{scope.row.addTime|dateFormatYYYYMMDD}}/{{scope.row.addUser}}</span></template>
                </el-table-column>
                <el-table-column label="更新时间/人" prop="lastEditTime/editUser"
                                 v-if="!columnsHidden['lastEditTime/editUser']">
                    <template slot-scope="scope"><span>{{scope.row.lastEditTime|dateFormatYYYYMMDD}}/{{scope.row.editUser}}</span>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination :background="true" style="padding: 20px;" :current-page.sync="queryParams.pageNum"
                           :page-size="queryParams.pageSize" layout="prev, pager, next" :total="total"
                           @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                           @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"></el-pagination>
        </section>
    </div>
</template>
<script>  import { formData, formMethod, PageData } from '@/utils/formcommon';
import { getUrlParam, dateFormatYYYYMMDD } from '@/utils/index';
import * as  api from '@/apis/mesBpmForm.api.js';
import { default as FormDialog } from '@codegenarate/mydialogplus';

const dicInner = {
  '___mes_bpm_form_id': '主键ID',
  'mes_bpm_form_id': 'mes_bpm_form_id',
  '___mes_bpm_form_bpmId': '对应生产计划单id',
  'mes_bpm_form_bpmId': 'mes_bpm_form_bpmId',
  '___mes_bpm_form_formType': '1打版',
  'mes_bpm_form_formType': 'mes_bpm_form_formType',
  '___mes_bpm_form_fieldName': '对应字段名',
  'mes_bpm_form_fieldName': 'mes_bpm_form_fieldName',
  '___mes_bpm_form_fieldType': '对应字段类型 1文本  2单选框  3多选框  4下拉框 ',
  'mes_bpm_form_fieldType': 'mes_bpm_form_fieldType',
  '___mes_bpm_form_fieldValue': '对应字段值',
  'mes_bpm_form_fieldValue': 'mes_bpm_form_fieldValue',
  '___mes_bpm_form_fieldCode': '字段编码',
  'mes_bpm_form_fieldCode': 'mes_bpm_form_fieldCode',
  '___mes_bpm_form_orderNum': '排序号',
  'mes_bpm_form_orderNum': 'mes_bpm_form_orderNum',
  '___mes_bpm_form_state': '状态 1 正常  5暂停 10废除',
  'mes_bpm_form_state': 'mes_bpm_form_state',
  '___mes_bpm_form_remarks': '备注',
  'mes_bpm_form_remarks': 'mes_bpm_form_remarks',
  '___mes_bpm_form_tenantType': '租户类型 1应用管理者2应用消息者',
  'mes_bpm_form_tenantType': 'mes_bpm_form_tenantType',
  '___mes_bpm_form_tenantId': '租户ID',
  'mes_bpm_form_tenantId': 'mes_bpm_form_tenantId',
  '___mes_bpm_form_delState': '有效状态[数据字典=del_state] 1有效  5删除',
  'mes_bpm_form_delState': 'mes_bpm_form_delState',
  '___mes_bpm_form_addUser': '添加人',
  'mes_bpm_form_addUser': 'mes_bpm_form_addUser',
  '___mes_bpm_form_addUserId': '添加人ID',
  'mes_bpm_form_addUserId': 'mes_bpm_form_addUserId',
  '___mes_bpm_form_addTime': '添加时间',
  'mes_bpm_form_addTime': 'mes_bpm_form_addTime',
  '___mes_bpm_form_editUser': '最近更新人',
  'mes_bpm_form_editUser': 'mes_bpm_form_editUser',
  '___mes_bpm_form_editUserId': '最近更新人ID',
  'mes_bpm_form_editUserId': 'mes_bpm_form_editUserId',
  '___mes_bpm_form_lastEditTime': '最近更新时间',
  'mes_bpm_form_lastEditTime': 'mes_bpm_form_lastEditTime',
  '___mes_bpm_form_serverNumber': '服务器编号ID',
  'mes_bpm_form_serverNumber': 'mes_bpm_form_serverNumber',
};
export default {
  name: 'mesBpmFormlist',
  data() {
    return {
      api: api,
      dicInner, ...formData,
      queryParams: {
        bpmId: '',
        name: '',
        fieldName: '',
        fieldType:'',
        state:'',
        ...PageData,
      },
      lists: [],
      selectRows: [],
      classId: '',
      classIdPath: '',
      className: '',
      loading: false,
      isFold: false,
      tableRowClassName({ row, rowIndex }) {
        if (row.rowType == 'total') {
          return 'total-row';
        }
        return '';
      },
    };
  },
  components: {
    svgIcon: () => import('@codegenarate/svg-icon'),
    dicSelect: () => import('@/components/dicselect.vue'),
    dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
    RightToolbar: () => import('@/components/RightToolbar/index.vue'),
    modify: () => import('./modify.vue'),
  },
  mounted() {
  
  },
  computed: {},
  watch: {},
  filters: {
    dateFormatYYYYMMDD: dateFormatYYYYMMDD,
  },
  methods: {
    ...formMethod,
    /**
     * @description: _data.bpmId
     * @params
     * @return
     */
    async initByDialog(_data) {
      this.queryParams.bpmId = _data && _data.bpmId || '';
      this.getInfoList();
    },
    async upup(row, index) {
      var currentRow = row;
      var upRow = this.dataList[index - 1];
      await api.update({
        id: row.id,
        orderNum: row.orderNum - 1,
      });
      await api.update({
        id: upRow.id,
        orderNum: upRow.orderNum + 1,
      });
      this.getInfoList();
    },
    async downdown(row, index) {
      var currentRow = row;
      var downRow = this.dataList[index + 1];
      await api.update({
        id: row.id,
        orderNum: row.orderNum + 1,
      });
      await api.update({
        id: downRow.id,
        orderNum: downRow.orderNum - 1,
      });
      this.getInfoList();
    },
    
    tableRowClickOnece(row, tableRef, options) {
      var table = this.$refs[tableRef];
      if (options && options.canSelect) {
        var istrue = options.canSelect(row);
        if (!istrue) {
          table && table.toggleRowSelection(row, false);
        }
      }
      table && table.clearSelection();
      table && table.toggleRowSelection(row);
    },
    
    /**
     * @description: 配置事件
     * @params
     * @return
     */
    async triggerEventHandler() {
      var result = await FormDialog({
        width: '1000px',
        closeOnClickModal: false,
        title: '配置事件',
        data() {
      
        },
        components: {
          modify: () => import('@/views/bnpmList/form/eventhandlers/list.vue'),
        },
      });
    },
    
    /**
     * @description: 配置 表达式
     * @params
     * @return
     */
    async triggerExpression(row) {
      var result = await FormDialog({
        width: '888px',
        title: '表达式配置',
        closeOnClickModal: false,
        data() {
        
        },
        components: {
          modify: () => import('@/views/bnpmList/form/expressions/list.vue'),
        },
      });
    },
    
    async triggerModify(row) {
      var self = this;
      var orderNum = 1;
      if (!row?.id) {
        orderNum = parseInt((this.dataList[this.dataList.length - 1]?.orderNum || 0)) + 1;
      }
      var result = await FormDialog({
        width: '888px',
        title: row?.id ? '编辑' : '新增',
        data() {
          return {
            ...row,
            bpmId: self.queryParams.bpmId,
            orderNum,
          };
        },
        components: {
          modify: () => import('./modify.vue'),
        },
      });
      if (!(result && result.success)) {
        return result;
      }
      this.getInfoList();
    },
  },
};</script>
